<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

onMounted(() => {
  AMapLoader.load({
    key: "906e92fdfc3d7f9421d2e8384a7a815b",
    version: "2.0",
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      //JS API 加载完成后获取AMap对象
      // 初始化

      map = new AMap.Map("container", {
        viewMode: "2D", //默认使用 2D 模式
        zoom: 11, //地图级别
        mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
        center: [116.397428, 39.90923], //地图中心点 
      });

      layer = new AMap.createDefaultLayer({
        zooms: [3, 20], //可见级别
        visible: true, //是否可见
        opacity: 1, //透明度
        zIndex: 0, //叠加层级
      });
      traffic = new AMap.TileLayer.Traffic({
        autoRefresh: true, //是否自动刷新，默认为false
        interval: 180, //刷新间隔，默认180s
      });
      map.add(traffic); //通过add方法添加图层
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>
